<template>
<div>
<van-checkbox-group class="card-contrainer" v-model="checkedGoods">
  <van-checkbox
    class="card-contrainer__item"
    v-for="item in products"
    :key="item.products_id"
    :name="item.products_id"
  >
    <div class="van-card">
      <div class="van-card__thumb">
        <img v-if="JSON.parse(item.images)[0]" :alt="item.name" :src="config.uploadUrl+JSON.parse(item.images)[0]" class="van-card__img"/>
        <img v-if="!JSON.parse(item.images)[0]" :alt="item.name" :src="'http://iph.href.lu/100x100?text=%E6%97%A0%E5%9B%BE%E7%89%87'" class="van-card__img"/>
      </div>
      <div class="van-card__content">
        <div class="van-card__row">
          <div class="van-card__title">{{ item.name }}</div>
          <div class="van-card__price" style="color: red;">
            <span v-if="item.price_rmb > 0">¥:{{ Math.round(item.price_rmb,2) }}</span><br />
            <span v-if="item.price_retail > 0">零售积分:{{ Math.round(item.price_retail,2) }}</span><br />
            <span v-if="item.price_shop > 0">商城积分:{{ Math.round(item.price_shop,2) }}</span><br />
          </div>
        </div>
        <div class="van-card__row">
          <!--<div class="van-card__desc">描述信息</div>-->
          <div class="van-card__num">x {{ item.amount }}</div>
        </div>
      </div>
    </div>
  </van-checkbox>
</van-checkbox-group>

<van-submit-bar
  :disabled="!checkedGoods.length"
  :button-text="submitBarText"
  @submit="onSubmit"
/>
</div>
</template>

<script>
import qs from 'qs';
import { Checkbox, CheckboxGroup, Card, SubmitBar } from 'vant';
import ajaxVant from '../../utils/ajaxVant';
import cart from '../../utils/cart';
import config from '../../config';

export default {
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [SubmitBar.name]: SubmitBar,
    [CheckboxGroup.name]: CheckboxGroup
  },
  data() {
    return {
      config,
      checkedGoods: [],
      products: []
    };
  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '结算' + (count ? `(${count})` : '');
    },
    totalPrice() {
      /*
      return this.products.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
      */
      return 100;
    }
  },
  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    getData() {
      var _this = this;
      cart.getCarts().then(function(carts) {
        if (carts === null) {
          return false;
        }
        var ids = [];
        for (var id in carts) {
          ids.push(id);
        }
        ajaxVant.get('/products/findByIds?' + qs.stringify({ ids: ids })).then(function(data) {
          if (data !== false) {
            for (var i in data.pager) {
              data.pager[i].amount = carts[data.pager[i].products_id].amount;
              _this.products.push(data.pager[i]);
              _this.checkedGoods.push(data.pager[i].products_id);
            }
          }
        });
      });
    },
    onSubmit() {
      var _this = this;
      var products = {};
      this.products.reduce(function(total, item) {
        if (_this.checkedGoods.indexOf(item.products_id) !== -1) {
          products[item.products_id] = { amount: item.amount };
        }
      }, 0);
      cart.deleteCart(products);
      this.$router.push({ name: 'order', query: { products: qs.stringify(products) }});
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style>
.card-contrainer {
  padding: 10px 0;
  padding-bottom: 50px;
  background-color: #fff;
}
.card-contrainer__item {
  position: relative;
  background-color: #fafafa;
}
.card-contrainer__item .van-checkbox__label {
  width: 100%;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
}
.card-contrainer__item .van-checkbox__icon {
  top: 50%;
  left: 10px;
  z-index: 1;
  position: absolute;
  margin-top: -10px;
}
.card-contrainer__item .van-card__price {
  color: #f44;
}
</style>